<%--
  Created by IntelliJ IDEA.
  User: xianfei
  Date: 2016-01-08
  Time: 11:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Admin Manager</title>
</head>
<body>
<span>请按&nbsp;<kbd><kbd>ctrl</kbd><kbd>+</kbd><kbd>F</kbd></kbd>&nbsp;来执行</span>
<button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>搜索
</button>
<hr/>
<div id="admin_content">
    <button class="btn btn-default" @click="findAllAdminUser()">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>显示所有管理员
    </button>
    <button class="btn btn-default" onclick="model()">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加管理员
    </button>
    <br/>
    <br/>
    <table class="table table-hover">
        <th>管理员编号</th>
        <th>管理员帐号</th>
        <th>管理员昵称</th>
        <th>管理操作</th>
        <tbody>
        <tr v-for="admin in adminUser">
            <td>{{admin.guid}}</td>
            <td>{{admin.username}}</td>
            <td>{{admin.nickname}}</td>
            <td><a href="javascript:">修改</a>&nbsp;
                <a href="javascript:" @click="resetPwd(admin)">重置密码</a>&nbsp;
                <a href="javascript:" @click="delAdminUser(admin)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div>
    <input type="hidden" id="totalPage">
    <input type="hidden" id="currentPage">
    <ul id="pager"></ul>
</div>
<div class="modal fade" id="addAdminUserModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="addAdmin_title">添加管理员</h4>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control " id="admin_username" placeholder="管理员帐号" autocomplete="off">
                <input type="password" class="form-control " id="admin_password" placeholder="管理员密码" autocomplete="off">
                <input type="text" class="form-control " id="admin_nickname" placeholder="管理员昵称" autocomplete="off">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="addAdminUser()">
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>添加
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                </button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="resetAdminPwdModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="resetPwd_title">重置管理员密码</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="admin_reset_guid">
                <input type="password" class="form-control " id="admin_reset_pwd" placeholder="管理员新密码"
                       autocomplete="off">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="resetAdminPwd()">
                    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>保存
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
                </button>
            </div>
        </div>
    </div>
</div>
<div class="alert alert-success alert-dismissible" role="alert" id="alert_div">
    <button type="button" class="close fade in" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong></strong>
</div>
<myScript>
    <script>
        var adminModel = new Vue({
            el: '#admin_content',
            data: {
                adminUser: []
            },
            methods: {
                findAllAdminUser: function () {
                    $this = this;
                    $.ajax({
                        url: '/admin/list/1',
                        type: 'get',
                        success: function (data) {
                            $this.adminUser = data.userDTOs;
                            pageHandle(data.currentPage, data.totalPage);
                            adminModel.initPageInput(data.currentPage, data.totalPage);
                        }
                    })
                },
                delAdminUser: function (admin) {
                    $this = this;
                    $.ajax({
                        url: '/admin/del/' + admin.guid,
                        type: 'get',
                        success: function (data) {
                            if (data) {
                                $this.adminUser.$remove(admin);
                                if ($this.adminUser.length <= 0) {
                                    var page = $('#currentPage').val();
                                    if (page > 1) {
                                        $.ajax({
                                            url: '/admin/list/' + (page - 1),
                                            type: 'get',
                                            success: function (data) {
                                                adminModel.adminUser = data.userDTOs;
                                                pageHandle(data.currentPage, data.totalPage);
                                                adminModel.initPageInput(data.currentPage, data.totalPage);
                                            }
                                        })
                                    }
                                }
                            }
                        }
                    })
                },
                resetPwd: function (admin) {
                    $('#admin_reset_guid').val(admin.guid);
                    $('#resetAdminPwdModel').modal('show');
                },
                initPageInput: function (currentPage, totalPage) {
                    $('#currentPage').val(currentPage);
                    $('#totalPage').val(totalPage);
                }

            }
        })

        function model() {
            $('#addAdminUserModel').on('shown.bs.modal', function (e) {
            }).modal('toggle');
        }

        function addAdminUser() {
            var username = $('#admin_username').val();
            var password = $('#admin_password').val();
            var nickname = $('#admin_nickname').val();
            $.ajax({
                url: '/admin/add',
                type: 'post',
                dataType: 'json',
                data: {username: username, password: password, nickname: nickname},
                success: function (data) {
                    if (data.result) {
//                        adminModel.adminUser.push(data.data);
                        $('#addAdminUserModel').modal('hide');
                        $('#admin_username').val("");
                        $('#admin_password').val("");
                        $('#admin_nickname').val("");
                        var currentPage = $('#currentPage').val();
                        $.ajax({
                            url: '/admin/list/' + currentPage,
                            type: 'get',
                            success: function (data) {
                                adminModel.adminUser = data.userDTOs;
                                pageHandle(data.currentPage, data.totalPage);
                                adminModel.initPageInput(data.currentPage, data.totalPage);
                            }
                        })
                    } else {
                        $('#admin_username').focus();
                    }
                }
            })
        }

        function resetAdminPwd() {
            var adminGuid = $('#admin_reset_guid').val();
            var adminNewPwd = $('#admin_reset_pwd');
            if (adminNewPwd.val() == '') {
                adminNewPwd.focus();
            } else {
                $.ajax({
                    url: '/admin/reset_pwd',
                    type: 'post',
                    dataType: 'json',
                    data: {adminUserGuid: adminGuid, newPassword: adminNewPwd.val()},
                    success: function (data) {
                        if (data) {
                            $('#resetAdminPwdModel').modal('hide');
                            alertDivShow('恭喜您,密码重置成功!');
                            $('#admin_reset_pwd').val('');
                            setTimeout(alertDivHide, 3000);
                        }
                    }
                })
            }
        }

        function pageHandle(currentPage, totalPage) {
            var options = {
                bootstrapMajorVersion: 3,
                currentPage: currentPage,
                totalPages: totalPage,
                size: "normal",
                alignment: "center",
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },
                onPageClicked: function (e, originalEvent, type, page) {
                    $.ajax({
                        url: '/admin/list/' + page,
                        type: 'get',
                        success: function (data) {
                            adminModel.adminUser = data.userDTOs;
                            pageHandle(data.currentPage, data.totalPage);
                            adminModel.initPageInput(data.currentPage, data.totalPage);
                        }
                    })
                }
            }
            $("#pager").bootstrapPaginator(options);
        }


        $(function () {
            alertDivHide();
        })

        function alertDivHide() {
            $('#alert_div').hide();
        }

        function alertDivShow(data) {
            $('#alert_div').show().find('strong').html(data);
        }
    </script>
</myScript>
</body>
</html>
